<template>
  <div class='fas-dx-scope t-tree-list-container'>
    <DxTreeList v-bind='propsTreeList' :data-source="dataSource">
      <DxFilterRow v-bind="propsFilterRow"></DxFilterRow>
      <DxSelection v-bind="propsSelection"></DxSelection>
      <DxColumn v-for="col in computedColumns" v-bind="col">

      </DxColumn>
    </DxTreeList>
  </div>
</template>
<script>
import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  onUnmounted,
  reactive,
  ref,
  watch,
} from 'vue';

import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  pickOwnForBasicComponent,
  usePropsTwoWayValues,
} from 't/common/utils';

import _, { forIn, orderBy } from 'lodash';
import { useI18n } from 'vue-i18n';

import { DxButton } from 'devextreme-vue/button';
import { DxTreeList, DxColumn, DxSelection, DxFilterRow } from 'devextreme-vue/tree-list';
import Demo from './demo';

import notify from 'devextreme/ui/notify';

import { tasks, employees, priorities } from './data.ts';

const SelectionMode = {
  none: 'none',
  single: 'single',
  multiple: 'multiple',
};
export default defineComponent({
  components: {
    DxTreeList,
    DxColumn,
    DxSelection,
    DxFilterRow,
    DxButton,
  },
  name: 'TTreeList',
  props: {
    ...commonProps,
    selectionMode: {
      type: String,
      default() {
        return SelectionMode.none;
      },
    },
    recursive: {
      type: Boolean,
      default() {
        return false;
      },
    },
    allowSelectAll: {
      type: Boolean,
      default() {
        return true;
      },
    },
    filterRowVisible: {
      type: Boolean,
      default() {
        return false;
      },
    },
    optColumns: {
      type: [Array, String],
      default() {
        return [];
      },
    },
    ...DxTreeList.props,
  },
  emits: [],

  setup(props, { attrs, emit, expose, slots }) {
    // const vm = getCurrentInstance()
    const { t } = useI18n({ useScope: 'global' });

    const [mappingProps, mappingExpose] = useMappingProps(props, {});
    expose(mappingExpose);

    const propsSelection = computed(() => {
      return {
        mode: mappingProps.selectionMode,
        recursive: mappingProps.recursive,
        allowSelectAll: mappingProps.allowSelectAll,
      };
    });

    const mappingColumns = computed(() => {
      let mappingColumns = mappingProps?.optColumns || [];
      return mappingColumns.map(col => {
        return { ...col };
      });
    });

    const computedColumns = computed(() => {
      let columns = mappingProps?.columns || mappingColumns.value || [];
      return columns;
    });

    const propsFilterRow = computed(() => {
      return {
        visible: mappingProps.filterRowVisible,
      };
    });

    const propsTreeListHeight = computed(() => {
      return {
        height: mappingProps.height,
      };
    });

    const propsTreeListIdKey = computed(() => {
      return {
        keyExpr: mappingProps.keyExpr,
        parentIdExpr: mappingProps.parentIdExpr,
      };
    });

    const propsTreeList = computed(() => {
      debugger;
      // const propsKey = Object.keys(DxTreeList.props);
      const propsKey = [
        'columnMinWidth',
        'allowColumnResizing',
        'columnResizingMode',
        'dataSource',
        // 'keyExpr',
        // 'parentIdExpr',
      ];
      let pickProps = _.pick(mappingProps, propsKey);
      pickProps = _.pickBy(pickProps, (v, k) => {
        return false === _.isUndefined(v);
      });
      return {
        ...pickProps,
        ...propsTreeListIdKey.value,
        ...propsTreeListHeight.value,
      };
    });

    return {
      t,
      propsSelection,
      propsFilterRow,
      propsTreeList,
      computedColumns,
    };
  },
});


</script>
<style></style>
